{% extends "admin/base.html" %}

{% block content %}
<div class="jumbotron">
	<div class="container">
		<h1><b>{{ 'Import Status' if en else '数据导入状态' }}</b></h1>
	</div>
</div>
<div class="container">
    {% if en %}
	<div class="row">
		<div class="col-md-6 offset-md-3">
			<p>
				<b>Start Time:</b> <span id="start-time">{{ start_time }}</span>
			</p>
			{% if end_time %}
			<p>
				<b>End Time:</b> <span id="end-time">{{ end_time }}</span>
			</p>
			{% endif %}
			{% if import_error %}
			<p>
				<b>Import Error:</b> {{ import_error }}
			</p>
			<div class="alert alert-danger" role="alert">
				An error occurred during the import. Please try again.
			</div>
			{% else %}
			<p>
				<b>Current Status:</b> {{ import_status }}
			</p>
			<div class="alert alert-secondary" role="alert">
				Page will redirect upon completion. Refresh page to get latest status.<br>
				Page will automatically refresh every 5 seconds.
			</div>
			{% endif %}
		</div>
	</div>
    {% else %}
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <p>
                <b>开始时间:</b> <span id="start-time">{{ start_time }}</span>
            </p>
            {% if end_time %}
            <p>
                <b>结束时间:</b> <span id="end-time">{{ end_time }}</span>
            </p>
            {% endif %}
            {% if import_error %}
            <p>
                <b>导入错误:</b> {{ import_error }}
            </p>
            <div class="alert alert-danger" role="alert">
                导入期间发生错误。 请再试一次。
            </div>
            {% else %}
            <p>
                <b>当前状态:</b> {{ import_status }}
            </p>
            <div class="alert alert-secondary" role="alert">
                页面将在导入完成后重定向。<br>
                定期刷新页面以获取最新状态。<br>
                页面将每5秒自动刷新一次。
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
	// Reload every 5 seconds to poll import status
	setTimeout(function(){
		window.location.reload();
	}, 5000);

	let start_time = "{{ start_time | tojson }}";
	let end_time = "{{ end_time | tojson }}";
	let start = document.getElementById("start-time");
	start.innerText = new Date(parseInt(start_time) * 1000);

	if (end_time !== "null") {
		let end = document.getElementById("end-time");
		end.innerText = new Date(parseInt(end_time) * 1000);
	}
</script>
{% endblock %}
